.menu-icon1 {
  content: url(~@/assets/img/icon/menu-icon1-dark.svg);
}
.menu-icon2 {
  content: url(~@/assets/img/icon/menu-icon2-dark.svg);
}
.menu-icon3 {
  content: url(~@/assets/img/icon/menu-icon3-dark.svg);
}
.menu-icon4 {
  content: url(~@/assets/img/icon/menu-icon4-dark.svg);
}
.menu-icon5 {
  content: url(~@/assets/img/icon/menu-icon5-dark.svg);
}
.menu-icon6 {
  content: url(~@/assets/img/icon/menu-icon6-dark.svg);
}
.menu-icon7 {
  content: url(~@/assets/img/icon/menu-icon7-dark.svg);
}
.menu-icon8 {
  content: url(~@/assets/img/icon/menu-icon8-dark.svg);
}
.menu-icon9 {
  content: url(~@/assets/img/icon/menu-icon9.svg);
}
.menu-icon10 {
  content: url(~@/assets/img/icon/menu-icon10.svg);
}
.menu-icon11 {
  content: url(~@/assets/img/icon/menu-icon11-dark.svg);
}
.menu-icon11-1 {
  content: url(~@/assets/img/icon/menu-icon11-1-dark.svg);
}
.menu-icon11-2 {
  content: url(~@/assets/img/icon/menu-icon11-2-dark.svg);
}
.menu-icon11-3 {
  content: url(~@/assets/img/icon/menu-icon11-3-dark.svg);
}
.menu-icon11-4 {
  content: url(~@/assets/img/icon/menu-icon11-4-dark.svg);
}
.menu-icon11-5 {
  content: url(~@/assets/img/icon/menu-icon11-5-dark.svg);
}
.menu-icon12 {
  content: url(~@/assets/img/icon/menu-icon12-dark.svg);
}
.menu-icon13 {
  content: url(~@/assets/img/icon/menu-icon13-dark.svg);
}
.menu-icon14 {
  content: url(~@/assets/img/icon/menu-icon14-dark.svg);
}
.menu-icon15 {
  content: url(~@/assets/img/icon/menu-icon15-dark.svg);
}
.menu-icon16 {
  content: url(~@/assets/img/icon/menu-icon16-dark.svg);
}
.menu-icon17 {
  content: url(~@/assets/img/icon/menu-icon17-dark.svg);
}
.menu-icon18 {
  content: url(~@/assets/img/icon/menu-icon18-dark.svg);
}
.is-active .menu-icon1 {
  content: url(~@/assets/img/icon/menu-icon1-dark-active.svg);
}
.is-active .menu-icon2 {
  content: url(~@/assets/img/icon/menu-icon2-dark-active.svg);
}
.is-active .menu-icon3 {
  content: url(~@/assets/img/icon/menu-icon3-dark-active.svg);
}
.is-active .menu-icon4 {
  content: url(~@/assets/img/icon/menu-icon4-dark-active.svg);
}
.is-active .menu-icon5 {
  content: url(~@/assets/img/icon/menu-icon5-dark-active.svg);
}
.is-active .menu-icon6 {
  content: url(~@/assets/img/icon/menu-icon6-dark-active.svg);
}
.is-active .menu-icon8 {
  content: url(~@/assets/img/icon/menu-icon8-dark-active.svg);
}
.is-active .menu-icon13 {
  content: url(~@/assets/img/icon/menu-icon13-dark-active.svg);
}
.is-active .menu-icon16 {
  content: url(~@/assets/img/icon/menu-icon16-dark-active.svg);
}
.is-active .menu-icon17 {
  content: url(~@/assets/img/icon/menu-icon17-dark-active.svg);
}
.is-active .menu-icon18 {
  content: url(~@/assets/img/icon/menu-icon18-dark-active.svg);
}
.layout {
  background: rgba(238, 238, 238, 0.3);
}
.el-tabs__header {
  margin: 0;
}
.nav-alike {
  overflow: hidden;
  margin-top: 16px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  background: transparent;
}
.nav-alike .nav-alike-item {
  display: inline-block;
  min-width: 80px;
  position: relative;
  padding: 5px 10px;
  font-size: 1.125rem;
}
.nav-alike .is-active::before {
  content: "";
  width: 100%;
  height: 5px;
  background-color: #0077FF;
  display: block;
  position: absolute;
  z-index: 1;
}
.nav-alike .active {
  color: #0077FF;
  background: #FFF;
}
.router-link-active {
  color: #333;
}
@media (max-width: 1200px) {
  .alike-lis li {
    min-width: calc(33.4% - 20px);
  }
}
@media (max-width: 767px) {
  .alike-lis li {
    min-width: calc(50% - 20px);
  }
}
@media screen and (max-width: 575px) {
  .alike-lis li {
    min-width: 100%;
  }
}
@media screen and (max-width: 433px) {
  .alike-lis li {
    min-width: 100%;
  }
}
.select-ver {
  margin-bottom: 20px;
}
.alike-lis {
  display: flex;
  flex-wrap: wrap;
}
.alike-lis li {
  flex: 0 0 calc(25% - 0.625rem);
  padding: 0 8px 16px;
  margin-bottom: 1.25rem;
  margin-right: 0.625rem;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.alike-lis li .alike-lis-box {
  background: #FFF;
  border-radius: 10px;
  overflow: hidden;
  max-height: 313px;
}
.alike-lis li .alike-lis-box:hover i {
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
}
.alike-lis li .alike-lis-pic {
  width: 100%;
  height: 190px;
  cursor: pointer;
}
.alike-lis li .alike-lis-word {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  box-sizing: border-box;
}
.alike-lis li .alike-lis-word > * {
  line-height: 2.5em;
}
.alike-lis li .alike-lis-title {
  position: relative;
  font-weight: bold;
  line-height: 24px;
  display: flex;
  font-size: 0.875rem !important;
  cursor: pointer;
}
.alike-lis li .alike-lis-title .name {
  max-width: 65%;
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alike-lis li .alike-lis-title .status-tag {
  font-size: 12px;
  line-height: 1em;
  padding: 5px;
  white-space: nowrap !important;
}
.alike-lis li .alike-lis-title .status-tag.danger {
  border: 1px solid #FF8D8D;
  background: rgba(227, 30, 30, 0.26);
  color: #FF8D8D;
}
.alike-lis li .alike-lis-title .status-tag.warning {
  border: 1px solid #E3D21E;
  background: rgba(227, 210, 30, 0.31);
  color: #E3D21E;
}
.alike-lis li .alike-lis-title .status-tag.success {
  border: 1px solid #B0E31E;
  background: rgba(176, 227, 30, 0.31);
  color: #B0E31E;
}
.alike-lis li .alike-lis-title i {
  position: absolute;
  display: flex;
  top: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #202337;
}
.alike-lis li .alike-lis-hint {
  font-size: 12px;
  height: 2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alike-lis li .alike-lis-user {
  font-size: 12px;
}
.alike-lis li .alike-lis-user img {
  width: 14px;
  float: left;
}
.alike-lis li .alike-lis-user .user-name {
  font-size: 12px;
}
.alike-lis li .alike-lis-user .date {
  float: right;
}
.alike-lis-header {
  display: flex;
  justify-content: space-between;
  margin: 0 0 9px;
}
.alike-lis-header .lis-header-left {
  display: flex;
  align-items: center;
}
.alike-lis-header .add-btn {
  border: 1px solid #64B121;
  background: rgba(100, 177, 33, 0.6);
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  display: inline-block;
  min-width: 56px;
  padding: 0 4px;
  line-height: 28px;
  text-align: center;
  margin-right: 10px;
  cursor: pointer;
}
.alike-lis-header .search-box .el-input__prefix {
  top: -6px;
  left: 0;
  font-size: 20px;
  color: #47547C;
}
.alike-lis-header .search-box .el-input__inner {
  height: 28px;
  line-height: 28px;
  border: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid #47547C !important;
  border-radius: 0;
}
.btns-switch {
  width: 100px;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}
.btns-switch img {
  width: 100%;
  height: 100%;
}
.btns-switch div {
  width: 40px;
  height: 28px;
  cursor: pointer;
}
.btns-switch .btn {
  width: 40px;
  height: 20px;
  line-height: 20px;
  padding: 5px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: #808080;
  cursor: pointer;
}
.btns-switch .is-active {
  background: rgba(128, 128, 128, 0.5) !important;
}
.alike-lis-handle {
  padding-left: 26px;
  line-height: 36px;
  display: block;
  color: #4285F4;
}
.alike-lis-handle:hover {
  background: #F5F7FA;
}
.radio_box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.radio_box :deep(.el-radio-group) .el-radio-button__inner {
  font-size: 15px;
  width: 120px !important;
  height: 40px;
  color: #8492c2 !important;
  background: #111518;
  border: 1px solid #8492c2 !important;
}
.radio_box :deep(.el-radio-group) /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: #8492c2 !important;
  color: #ffffff !important;
  border: 1px solid #8492c2 !important;
}
:deep(.el-radio-group) .el-radio-button__inner {
  font-size: 15px;
  width: 120px !important;
  height: 40px;
  color: #8492c2 !important;
  background: #111518;
  border: 1px solid #8492c2 !important;
}
:deep(.el-radio-group) /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: #8492c2 !important;
  color: #ffffff !important;
  border: 1px solid #8492c2 !important;
}
.pagination-box {
  overflow: hidden;
  padding: 18px 10px 20px 0;
}
.pagination-box .pagination {
  float: right;
  display: flex;
}
.pagination-box .el-pager li {
  border: 1px solid rgba(238, 238, 238, 0.2) !important;
}
.pagination-box .el-pager .active {
  background: #177DDC !important;
  border: 1px solid #177DDC;
}
.pagination-box .btn-prev,
.pagination-box .btn-next {
  border: 1px solid #177DDC;
}
.pagination-box .btn-prev i,
.pagination-box .btn-next i {
  color: #177DDC;
}
.pagination-box .el-pagination__jump {
  display: flex !important;
  align-items: center !important;
}
.code-desc-header .title {
  min-width: 130px;
}
.code-desc-header .code-status {
  min-width: 22.5rem;
}
.my-steps {
  height: 64px;
  box-sizing: border-box;
}
.my-steps .el-step__head {
  margin-top: 10px;
}
.myself-table {
  margin-top: 20px;
}
.myself-form {
  max-width: 864px;
}
#app .myself-steps {
  padding-left: 100px;
  max-width: 760px;
  background: rgba(0, 0, 0, 0);
  height: 40px;
}
#app .myself-steps .el-step.is-simple {
  overflow: hidden;
}
#app .myself-steps .el-step__head {
  margin-top: 6px;
}
#app .myself-steps .el-step__arrow {
  margin: 0 20px;
  position: relative;
}
#app .myself-steps .el-step__arrow::before {
  display: none;
}
#app .myself-steps .el-step__arrow::after {
  transform: rotate(0deg);
  width: 100%;
  height: 1px;
  background: #ccc;
  box-sizing: border-box;
}
#app .myself-steps .el-step__title.is-success {
  color: #0077FF;
}
#app .myself-steps .el-step__head.is-success {
  color: #0077FF;
  border-color: #0077FF;
}
#app .myself-steps .el-step__head.is-success .is-status {
  color: #0077FF;
}
.table-layout {
  background: #FFF;
}
.row-btns-item {
  margin-right: 10px;
  display: inline-block;
}
.row-btns-item:last-child {
  margin-right: 0;
}
.has-ver-table-layout {
  padding-right: 16px;
}
.full-extent-select {
  width: 100%;
}
.page-title {
  line-height: 24px;
  color: #3D3D3D;
  font-size: 18px;
  font-weight: bold;
  padding: 4px 2px;
}
.has-vers-lis {
  margin-top: 4px;
  width: 100%;
}
.has-vers-lis li {
  margin-bottom: 6px;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: #FFF;
}
.has-vers-lis .lis-header {
  display: flex;
  width: 100%;
  height: 48px;
  background: #F2F6FC;
  justify-content: space-between;
}
.has-vers-lis .lis-header .lis-header-name {
  padding-left: 24px;
  line-height: 48px;
  cursor: pointer;
}
.has-vers-lis .lis-header .lis-header-name strong {
  padding-right: 20px;
  width: 550px;
  box-sizing: border-box;
  float: left;
  line-height: 48px;
  font-size: 16px;
}
.has-vers-lis .lis-header .lis-header-name span {
  float: left;
  line-height: 48px;
  color: #606266;
}
.has-vers-lis .lis-header .lis-header-name span b {
  margin-right: 20px;
  font-weight: normal;
}
.has-vers-lis .ver-table {
  padding: 0 20px 10px;
  width: 100%;
  background-color: #FFF;
  box-sizing: border-box;
}
.has-vers-lis .header-style .cell {
  color: #8F9299;
  font-weight: normal;
}
.handle-btn-hollow {
  float: left;
  height: 24px;
  background: rgba(120, 114, 246, 0.1);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #7872F6;
  margin: 12px 8px 0 0;
  padding: 0 12px;
  font-size: 12px;
  line-height: 24px;
}
.handle-btn-hollow:hover {
  opacity: 0.8;
}
.detail-layout {
  background: #FFF;
  padding: 0 20px 20px 0;
  overflow: hidden;
}
.add-alike-title {
  margin-left: 24px;
  line-height: 24px;
  font-size: 16px;
  border-bottom: 1px solid #DCDFE6;
  margin-bottom: 20px;
  padding: 6px 0;
}
.alick-layout-status {
  margin-left: 4px;
}
.alick-layout-status.queuing {
  color: #E6A23C;
}
.alick-layout-status.deploying {
  color: #E6A23C;
}
.alick-layout-status.running {
  color: #67C23A;
}
.alick-layout-status.failed {
  color: #F56C6C;
}
.alick-list-status {
  padding: 0 8px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  display: inline-block;
  color: #409EFF;
  display: flex;
  align-items: center;
}
.alick-list-status * {
  margin-right: 5px;
}
.alick-list-status.queuing,
.alick-list-status.deploying,
.alick-list-status.terminating {
  color: #e6a23c;
}
.alick-list-status.running {
  color: #23bb5d;
}
.alick-list-status.failed {
  color: #f56c6c;
}
.layout-top {
  display: flex;
  justify-content: space-between;
}
.layout-top .rollback {
  position: absolute;
  top: 11px;
  left: 20px;
  color: #8492C2;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.layout-top .rollback img {
  width: 14px;
  mask-repeat: no-repeat;
  mask-size: 14px;
  mask-position: center;
  mask-image: url(~@/assets/img/prev.png);
  background: #8492C2;
  color: #8492C2;
}
.layout-top .code-description {
  flex-grow: 4;
}
.layout-top .code-status {
  flex-grow: 20;
  min-width: 300px;
}
.layout-top .btns-container {
  flex-grow: 1;
  min-width: 18.125rem;
}
.alick-handle-btns {
  float: right;
}
.alick-handle-btns .handle-btn {
  margin: 0 5px 10px;
}
.alick-handle-btns:first-child .handle-btn {
  margin-left: 0;
}
.version-list {
  padding: 0.625rem 0;
}
.version-list .version-item {
  line-height: 2em;
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.version-list .version-item:hover {
  background: #eee;
}
.version-list .version-item p {
  display: flex;
  justify-content: space-between;
  padding: 0.3125rem 0;
}
.version-list .version-item .title {
  font-size: 20px;
}
.version-list .version-item .commit {
  color: #808080;
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  width: 90%;
}
.alick-popover-handle-btns {
  display: flex;
  flex-direction: column;
}
.alick-popover-handle-btns .handle-btn {
  margin-bottom: 10px;
  min-width: 55px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  background: #7872F6;
  border-radius: 4px;
  display: block;
  padding: 0 12px;
  text-align: center;
  color: #FFF;
}
.alick-popover-handle-btns .handle-btn:nth-child(2) {
  margin-left: 0;
}
.alick-add-form {
  max-width: 800px;
}
.right-btn-box {
  display: block;
  width: 100%;
  overflow: hidden;
  padding-bottom: 10px;
}
.right-btn-box .outin-handle {
  float: right;
}
.port-lis {
  display: flex;
  width: calc(100% - 24px);
}
.port-lis .port-el-input {
  flex: 1;
  margin-left: 10px;
  box-sizing: border-box;
}
.port-lis .port-lis-radio {
  padding-top: 4px;
  width: 160px;
}
.alike-lis-both {
  width: 100%;
}
.alike-lis-both ul {
  width: calc(100% + 20px);
  margin: 0 -10px;
}
.alike-lis-both .lis-both-item {
  width: calc(50% - 20px);
  margin: 20px 10px 0;
  background: #FFF;
  float: left;
  height: 150px;
  display: flex;
  border-radius: 4px;
  cursor: pointer;
}
.alike-lis-both .lis-both-item .dimg {
  width: 200px;
  height: 150px;
}
.alike-lis-both .lis-both-item .word-box {
  padding: 0 20px;
  overflow: hidden;
  flex: 1;
  position: relative;
}
.alike-lis-both .lis-both-item .title {
  padding-top: 20px;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}
.alike-lis-both .lis-both-item .hint {
  display: -webkit-box;
  display: -moz-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin-top: 15px;
  max-height: 45px;
}
.alike-lis-both .lis-both-item .status-box {
  margin-left: -8px;
}
.alike-lis-both .lis-both-item .status-box .count-ran-time {
  display: inline-block;
  margin-left: 20px;
  font-size: 12px;
}
.alike-lis-both .lis-both-item .delete-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
  font-size: 20px;
  cursor: pointer;
  color: #999;
}
.alick-btn-edit {
  margin-left: 8px;
  cursor: pointer;
}
.desc-container {
  position: relative;
  margin: 0.625rem 0;
}
.desc-container .text {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
}
.desc-container .toggle-button {
  position: absolute;
  bottom: -1.875rem;
  right: 0.625rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  text-decoration: underline;
}
.el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner {
  color: #333;
  font-size: 1.125rem;
}
.tabs-box .el-tabs__nav-wrap::after {
  height: 1px !important;
  background: #4e5776 !important;
}
.tabs-box .el-tabs__nav-wrap .el-tabs__nav-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}
.tabs-box .el-tabs__nav-wrap .el-tabs__nav-scroll .el-tabs__nav {
  border: 0 !important;
}
.tabs-box .el-tabs__nav-wrap .el-tabs__nav-scroll .el-tabs__nav * {
  border: 0 !important;
}
.tabs-box .el-tabs__nav-wrap .el-tabs__nav-scroll .el-tabs__item {
  color: #a4adcd !important;
  min-width: 8.125rem;
  font-size: 1.1875rem;
  line-height: 3.125rem;
  text-align: center;
  padding: 0;
}
.tabs-box .el-tabs__nav-wrap .el-tabs__nav-scroll .el-tabs__nav-scroll {
  padding: 0 15px;
}
.tabs-box .el-tabs__nav-wrap .el-tabs__nav-scroll .el-tabs__item {
  font-size: 16px;
}
.tabs-box .el-tabs__nav-wrap .el-tabs__nav-scroll .is-active {
  color: #0077FF;
  border: 0 !important;
  height: 0.3125rem;
  background-color: #0077FF;
  top: 0;
}
.tabs-box .el-tabs__nav-wrap .el-tabs__nav-scroll .el-tabs__active-bar {
  width: 8.125rem !important;
  height: 0.3125rem;
  background-color: #0077FF;
  top: 0;
}
.tabs-box .is-active {
  color: #019aff !important;
}
.tabs-two .el-tabs__item {
  min-width: 6.25rem !important;
  font-size: 1rem !important;
}
.tabs-two .is-active {
  height: 0.1875rem;
}
.tabs-two .el-tabs__active-bar {
  height: 0 !important;
  width: 6.25rem !important;
}
.el-textarea * {
  cursor: pointer !important;
  width: 100%;
}
.el-table .has-gutter th.is-leaf {
  padding: 0;
  line-height: 45px;
}
.el-table .el-table__row {
  padding: 0;
  height: 45px;
  max-width: 240px;
}
.el-table .el-table__row * {
  white-space: pre-wrap;
  text-align: left;
  line-height: 1.5em;
}
.el-table .cell .desc,
.el-table .cell .el-popover__reference {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.el-table__body-wrapper td .el-button--text {
  margin: 0 5px;
}
.el-table__body-wrapper td .el-button--text * {
  display: flex;
  align-items: center;
}
.menu {
  z-index: 9999;
}
.el-menu {
  z-index: 9999;
  /* height: 100vh; */
}
.el-menu .is-active {
  background: #409EFF;
}
.el-menu .is-active * {
  color: #fff !important;
}
.el-checkbox {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.el-checkbox .el-checkbox__inner {
  margin-top: 0 !important;
}
.el-breadcrumb__item .el-breadcrumb__inner {
  font-size: 16px !important;
}
.el-breadcrumb__item:nth-child(1) .el-breadcrumb__inner {
  color: #A4ADCD !important;
  font-size: 14px !important;
}
.el-breadcrumb__item .el-breadcrumb__separator {
  color: #A4ADCD !important;
}
.commit-info {
  margin: 10px 0 20px;
}
.header-box {
  width: 100%;
  box-sizing: border-box;
  background: #eee;
  height: 58px;
  padding: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-box .handle {
  float: left;
  margin-left: 5.625rem;
}
.header-box .handle .search {
  float: left;
  width: 22px;
  height: 22px;
  margin-right: 16px;
  background: url(~@/assets/img/search.png) no-repeat;
  background-size: 22px 22px;
}
.header-box .handle .full {
  float: left;
  width: 22px;
  height: 22px;
  margin-right: 16px;
  background: url(~@/assets/img/full.png) no-repeat;
  background-size: 22px 22px;
}
.header-box .user {
  float: right;
  margin-right: 1.25rem;
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.header-box .user .text {
  display: flex;
  align-items: center;
  margin-right: 16px;
  color: #8492C2 !important;
}
.header-box .user .text a {
  color: #8492C2;
}
.header-box .user .text a:hover {
  color: #409EFF;
}
.header-box .user .user-box {
  cursor: pointer;
  padding-top: 5px;
}
.header-box .user .user-box .avatar {
  width: 40px;
  height: 40px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: url(~@/assets/img/user-avatar.svg) no-repeat;
  background-size: 100%;
}
.header-box .user .user-box .avatar:hover {
  border-color: rgba(132, 146, 194, 0.2);
}
.header-box .user .user-box img {
  width: 40px;
  height: 40px;
  border: 2px solid transparent;
  border-radius: 50%;
}
.header-box .user .user-box img:hover {
  border-color: rgba(132, 146, 194, 0.2);
}
.avatar {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: url(~@/assets/img/user-avatar.svg) no-repeat;
  background-size: 100%;
  float: left;
}
.drawer-box {
  background: #242730;
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1);
}
.drawer-box .infinite-list .utils {
  padding: 5px;
}
.drawer-box .infinite-list .infinite-item {
  border-bottom: 1px solid #333;
}
.drawer-box .infinite-list .infinite-item.is-active {
  background: #5A658E;
}
.drawer-box .infinite-list .infinite-item.is-active .title {
  color: #333 !important;
}
.drawer-box .infinite-list .infinite-item.is-active .desc {
  color: #808080 !important;
}
.drawer-box .infinite-list .title {
  color: #333 !important;
}
.drawer-box .infinite-list .desc {
  color: #808080 !important;
}
.el-checkbox__input .el-checkbox__inner {
  width: 15px;
  height: 15px;
  background: transparent;
  border-width: 2px;
  margin-top: 10px;
}
.el-drawer__wrapper .el-drawer__body {
  overflow-y: auto;
  /* 滚动槽 */
  /* 滚动条滑块 */
}
.el-drawer__wrapper .el-drawer__body::-webkit-scrollbar {
  width: 6px;
}
.el-drawer__wrapper .el-drawer__body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}
.el-drawer__wrapper .el-drawer__body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
}
.el-drawer__wrapper .el-drawer__body::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.06);
}
